<!--
 * @Author: daokun.du@hand-china.com
 * @Date: 2023-05-31 13:23:19
 * @LastEditTime: 2023-05-31 17:30:22
 * @LastEditors: daokun.du@hand-china.com
 * @Description: 
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <!--引入VUE-->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>你好, {{name}}</h1>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false

    // el 的两种写法
    // const v = new Vue({
    //   // el: '#root', // 第一种写法
    //   data: {
    //     name: 'VUE'
    //   }
    // })
    // console.log(v);
    // // v.$mount('#root'); // $mount 是vue原型对象中绑定容器的方法
    // setTimeout(() => {
    //   v.$mount("#root") // 第二种写法
    // }, 1000);

    new Vue({
      el: '#root',
      // data的两种写法  对象式   函数式
      // data: {
      //   name: 'VUE'
      // }
      
      // data中的函数不能写成箭头函数，因为箭头函数没有this指向，会向外找，用的是全局的windows全局函数
      // 而function函数中的this指向的是VUE实例
      data: function(){
        return {
          name: 'VUE'
        }
      }
    })
  </script>
</html>